<template>
	<view class="settlement">
		<image class="headimg" mode="widthFix"
			src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131174409870124.png">
		</image>
		<view class="ask">
			<view class="asktitle">为什么要用[外卖店铺推广] 服务 ?</view>
			<view class="askanswer">外卖店铺推广可为美团/饿了么店铺提供</view>
			<view class="asktag">高曝光、高转化</view>
			<view class="askbtn" @click="handleViewExample">示例</view>
		</view>
		<view class="tip">填写意向信息，专属商务经理后续会与您联系</view>
		<uni-forms class="form" ref="form" :rules="rules" :modelValue="formData" label-position="top" label-width="300">
			<uni-forms-item label="商家门店名称" name="name" required>
				<input type="text" v-model="formData.name" placeholder="请输入商家门店名称" />
			</uni-forms-item>
			<uni-forms-item label="商家店铺定位" name="address" required>
				<picker mode="region" :value="formData.address" @change="bindRegionChange">
					<input v-if="formData.address" :value="formData.address" type="text" />
					<input v-else disabled="true" placeholder="请选择商家店铺定位" />
				</picker>
			</uni-forms-item>
			<uni-forms-item label="联系人" name="contacts" required>
				<input type="text" v-model="formData.contacts" placeholder="请输入联系人" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" name="mobile" required>
				<input type="text" v-model="formData.mobile" placeholder="请输入联系电话" />
			</uni-forms-item><uni-forms-item label="备注" name="remark" required>
				<input type="text" v-model="formData.remark" placeholder="请输入备注" />
			</uni-forms-item>
			<view class="submit" @click="submit">提交入驻信息</view>
		</uni-forms>
		<view class="service">
			<view class="servicetitle">快捷入驻
				<text>前往小程序自助快捷入驻</text>
			</view>
			<view class="list">
				<view class="li">
					<view class="name">外卖店铺</view>
					<view class="btn">快速入驻</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		storeApply
	} from '../../apirequest/api.js'
	export default {
		data() {
			return {
				formData: {
					name: '',
					address: '',
					contacts: '',
					mobile: '',
					remark: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写商家门店名称',
							},

						]
					},
					remark: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写备注',
							},

						]
					},
					address: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写商家店铺定位',
							},

						]
					},
					contacts: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写联系人',
							},

						]
					},
					mobile: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: "^1[3-9][0-9]{9}$",
								errorMessage: '格式错误',
							}

						]
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					storeApply(this.formData).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							})
							uni.navigateBack()
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			bindRegionChange(e) {
				console.log(e);
				this.formData.address = e.detail.value.join(' ')
			},
			handleViewExample() {
				uni.showToast({
					title: '暂未开通，敬请期待',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.settlement {
		width: 100%;
		position: relative;
		padding: 338rpx 0 100rpx;

		.headimg {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.ask {
			width: 701rpx;
			background: #FFFFFF;
			border-radius: 17rpx;
			margin: auto;
			padding: 30rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 2;

			.asktitle {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.askanswer {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				opacity: 0.53;
				margin-bottom: 14rpx;
			}

			.asktag {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF8639;
			}

			.askbtn {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF8639;
				padding: 15rpx 25rpx;
				border-radius: 10rpx;
				border: 1rpx solid #FF8639;
				position: absolute;
				right: 32rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.tip {
			width: 701rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FF8639;
			background: #FFF9F0;
			border-radius: 20rpx;
			padding: 24rpx 36rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
		}

		::v-deep .uni-forms {
			width: 698rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: auto;
			padding: 32rpx;
			box-sizing: border-box;

			.submit {
				width: 614rpx;
				height: 92rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 92rpx;
				background: #FE8025;
				border-radius: 46rpx;
				margin: 32rpx auto 0;
			}

			.uni-forms-item {
				.uni-forms-item__label {
					height: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.uni-forms-item__content {
					input {
						width: 640rpx;
						height: 80rpx;
						background: #F8F8F8;
						border: 1px solid #EEEEEE;
						border-radius: 10rpx;
						padding-left: 32rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.service {
			width: 698rpx;
			background: #fff;
			border-radius: 17rpx;
			margin: 20rpx auto;
			padding: 32rpx;
			box-sizing: border-box;

			.servicetitle {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				text {
					font-size: 20rpx;
				}
			}

			.list {
				display: flex;
				align-items: center;

				.li {
					background-color: #fff9f0;
					padding: 30rpx 24rpx;
					border-radius: 20rpx;
					box-sizing: border-box;

					.name {
						font-size: 24rpx;
						color: #333;
						margin-bottom: 10rpx;
					}

					.btn {
						font-size: 20rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>